<template>
  <div class="container">
    <el-form ref="form"  label-width="80px" style="padding:10px">
     <el-row style="height:40px;line-height:40px;">
      <el-col :span="6"><el-form-item label="用户名"> <el-input v-model="tableParams.username" placeholder="请输入内容"></el-input></el-form-item></el-col>
      <el-col :span="6"><el-form-item label="ID" ><el-input  v-model="tableParams.id" placeholder="请输入内容"></el-input></el-form-item></el-col>
      <el-col :span="12" style="text-align:left;padding: 0 10px;">
        <el-button type="primary" @click.native.prevent="searchUser()">查询</el-button>
        <el-button @click.native.prevent="reset()">重置</el-button>
        <el-button type="primary" style="float:right">注册用户</el-button>
      </el-col>
    </el-row>
    </el-form>
    <el-table
      :data="tableData"
      class="el-table"
      :border="true"
      :key="Math.random()"
      height="calc(100% - 135px)">
     <el-table-column
      type="index"
      :index="indexMethod"
      label="序号"
      width="50">
    </el-table-column>
      <el-table-column
        prop="id"
        label="ID"
        width="150">
      </el-table-column>
      <el-table-column
        prop="username"
        label="用户名"
        width="120">
      </el-table-column>
      <!-- <el-table-column
        prop="password"
        label="密码"
        width="120">
      </el-table-column> -->
      <el-table-column
        prop="role_key"
        label="角色">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="resetPass(scope.$index, scope.row)"
            type="text"
            size="small">
            重置密码
          </el-button>
          <el-button
            @click.native.prevent="deleteUser(scope.$index, scope.row)"
            type="text"
            size="small">
            删除用户
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="tableParams.page"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="total"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { getUserlist, deleteUser, resetPass } from '@/api/usermanage'
export default {
  name: 'index',
  props: {
  },
  data: function () {
    return {
      tableParams: {
        limit: 10,
        page: 1,
        username: '',
        id: ''
      },
      total: 0,
      tableData: []
    }
  },
  created () {
    this.getUserlist()
  },
  methods: {
    // 查询表格
    getUserlist () {
      getUserlist(this.tableParams).then(res => {
        this.tableData = res.data.list
        this.total = res.data.total || 0
      })
    },
    // 重置密码
    resetPass (index, rows) {
      resetPass(rows.id).then(res => {
        if (res.code === 0) {
          this.getUserlist(this.clickSearch)
          this.$message.success('密码重置成功')
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 删除用户
    deleteUser (index, rows) {
      console.log(rows)
      deleteUser(rows.id).then(res => {
        if (res.code === 0) {
          this.getUserlist(this.clickSearch)
          this.$message.success('删除成功')
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 点击limit
    handleSizeChange (val) {
      this.tableParams.limit = val
      this.getUserlist()
    },
    // 点击页码
    handleCurrentChange (val) {
      this.tableParams.page = val
      this.getUserlist()
    },
    // 查询
    searchUser () {
      this.getUserlist()
    },
    // 重置
    reset () {
      this.tableParams.id = ''
      this.tableParams.username = ''
      this.getUserlist()
    },
    // 返回递增序号
    indexMethod (index) {
      return (index + 1) + (this.tableParams.page - 1) * this.tableParams.limit
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.container{
  border-radius: 4px;
  width: 100%;
  height: 100%;
  background: #283046;
  overflow: auto;
}
.el-table{
  width: calc(100% - 30px);
  margin: 0 15px;
}
.el-table .head-color{
  background: #161d31;
}
.el-pagination{
  float:right;
  background: #283046;
  margin-top: 10px;
  padding:10px;
}
:deep(.el-form-item__label) {
    color: #ffffff;
}
:deep(.el-pagination__total){
  color: #ffffff;
}
:deep(.el-pagination__jump){
  color: #ffffff;
}
</style>
